<transition name="moves">
    <div v-show="flag" class="add-info operate-way info-content">
        <div class="init-width main-wrap flex ">
            <div class="left flex flex-v">
                <h4 class="app-title"><span @click="hide"><i class="icon-left back"></i></span>{{$t('pair')}}</h4>
                <div class="input-info">
                    <i class="icon-search"></i>
                    <input v-model="searchName" type="search" class="form-control" :placeholder="$t('searchMAC')">
                </div>
                <ul class="flex-1">
                    <li @click="selectDevice(item)" :class="{'active': selectMac == item.mac}"
                        class="flex flex-ac flex-jcb left-item"
                        v-for="item in list">
                        <div class="flex flex-ac">
                            <i class="icon icon-light icon-blue"></i>
                            <div class="flex flex-v">
                                <span>{{item.floor}}-{{item.area}}-{{item.code}}</span>
                                <span class="desc">MAC: {{item.mac}}</span>
                            </div>
                        </div>
                        <span class="icon-right"></span>
                    </li>
                </ul>
            </div>
            <div class="right flex flex-v flex-1">
                <div class="init-width flex flex-v">
                    <h4 class="app-title"></span>{{title}}</h4>
                    <i v-show="showEdit" @click="addPair" class="icon-plus right-top"></i>
                    <div class="ibeacon-content info-content">
                        <div class="info-item flex flex-ac flex-jcb">
                            <span class="info-disc-span">{{$t('floor')}}</span>
                            <el-select
                                    v-model="floor"
                                    filterable
                                    allow-create
                                    change="onFloorChange"
                                    default-first-option>
                                <el-option
                                        v-for="item in floorArray"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="info-item flex flex-ac flex-jcb">
                            <span class="info-disc-span">{{$t('area')}}</span>
                            <el-select
                                    v-model="area"
                                    filterable
                                    allow-create
                                    change="onAreaChange"
                                    default-first-option>
                                <el-option
                                        v-for="item in areaArray"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="info-item flex flex-ac flex-jcb">
                            <span class="info-disc-span">{{$t('code')}}</span>
                            <input v-model="serialNum" class="form-control">
                        </div>
                        <div class="info-item flex flex-ac flex-jcb">
                            <span class="info-disc-span">Mac</span>
                            <input v-model="mac" class="form-control">
                            <span @click="setScanner" class="scanner flex flex-ac"><i class="icon-scanner"></i></span>
                        </div>
                        <div v-show="!showEdit" class="margin-top-30 flex">
                            <button type="submit" class="btn register-btn" @click="savePair">{{$t('nextStep')}}</button>
                        </div>
                        <div v-show="showEdit" class="flex flex-jcb margin-top-30">
                            <button @click="deleteDevice" class="btn register-btn ibeacon-btn btn-danger">{{$t('deleteBtn')}}</button>
                            <button type="submit" class="btn register-btn ibeacon-btn" @click="editPair">{{$t('editBtn')}}</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</transition>
